<template>
  <view class="content">
    <view class="uni-margin-wrap">
      <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
        :duration="duration">
        <swiper-item v-for="(item,index) in background" :key="index">
          <view class="swiper-item uni-bg-red">
            <image :src="item" class="slide-image" />
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 文字 -->

    <view class="bode_view">
      <!-- <view>{{this.background }}</view> -->
      <!-- 日期/活动开始 -->
      <view class="head_view">
        <view class="text">
          ￥<span class="sizi">{{ dataList.price }}</span>
        </view>
        <view class="name">
          {{ dataList.activityName }}
        </view>
        <view class="dataTime">
          活动报名时间:{{ dataList.bookStartTime }} / {{ dataList.bookEndTime }}
        </view>
        <view class="kaishiData">
          活动开始时间:{{ dataList.activityStartDate }} / {{ dataList.activityEndDate }}
        </view>
        <view class="add">
          活动地址:{{ dataList.address }}
        </view>
        <view class="shiji">
          活动人数：{{ dataList.bookNum == null ? "0" :dataList.bookNum }}/{{ dataList.limitNum }}
        </view>
        <view class="bgrc"></view>
        <view class="text_q">
          <span class="color1">温馨提示 ：</span>为保障您的个人权益付款前请逐条确认报名协议
        </view>
        <view class="bgrc1"></view>
        <view class="activity">
          活动详情
        </view>
        <view class="abot">
          <view v-if="dataList.about != null">
            <rich-text :nodes="dataList.about"></rich-text>
          </view>
          <view v-else class="text_one11">
            暂无
          </view>
        </view>

      </view>
      <view class="btn">
        <view class="my_bt">
          <view class="img">
            <img src="../../static/my.png" alt="">
          </view>
          <view class="go_jupe" @click="go_mine">
            我的
          </view>
        </view>
        <!-- jupe_click -->
        <view :class=" dataList.states==1?'qqqqq': dataList.states==2 ?'liji': dataList.states==3?'qqqqq':''"
          @click="dataList.states== 1? jupe_click1() : dataList.states== 2 ? jupe_click() :dataList.states == 3 ? jupe_click2() :'' ">
          {{ dataList.states==1?'报名未开始': dataList.states==2 ?'活动报名中': dataList.states==3?'活动已结束':"" }}
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    IMG_URL
  } from "../../env.js"
  import {
    getActivityDetail,
    checkSession
  } from '@/common/request/api.js'
  export default {
    data() {
      return {
        IMG_URL,
        ids: "",
        title: 'Hello',
        background: [

        ],
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500,
        dataList: {},
      }
    },
    onLoad(options) {
      // console.log(options);
      this.ids = options.id
      console.log(this.ids);
      this.getActivityDetail(this.ids)
    },
    onShow() {

      this.tel = uni.getStorageSync('tel')
      console.log(this.tel);
    },
    methods: {
      //检查登录状态

      //跳转到我的页面
      go_mine() {
        console.log("888888888");
        console.log(uni.switchTab);
        uni.switchTab({
          url: '../home/index'
        });

      },
      jupe_click1() {
        // console.log("888888");
        uni.showToast({
          title: '报名未开始',
          icon: 'none',
          duration: 2000
        })
      },
      jupe_click2() {
        // console.log("82222222288888");

        uni.showToast({
          title: '活动已结束',
          icon: 'none',
          duration: 2000
        })
      },
      //跳转到协议页
      jupe_click() {
        if (this.tel == "") {
          uni.showModal({
            title: '温馨提示',
            content: '请先登录',
            showCancel: true,
            success: ({
              confirm,
              cancel
            }) => {
              console.log(confirm, cancel);
              if (confirm) {
                uni.navigateTo({
                  url: '../Login/index'
                });
              }
            }
          })
          return
        } else {

          checkSession().then((res) => {
            console.log(res.data.code);
            if (res.data.code == 4001) {
              uni.showModal({
                title: '温馨提示',
                content: '请先登录',
                showCancel: true,
                success: ({
                  confirm,
                  cancel
                }) => {
                  console.log(confirm, cancel);
                  if (confirm) {
                    //
                    uni.navigateTo({
                      url: '../Login/index'
                    });
                  }
                }
              })
            } else {
              uni.navigateTo({
                url: '../Agreement/index?id=' + this.ids
              });
            }
          })


        }
      },
      // jump_page(a, b) {
      //   console.log(a, b);
      //   console.log(uni.navigateTo());
      //   uni.navigateTo({
      //     url: '../Activitylist/index'
      //   });
      // },
      getActivityDetail(ids) {
        uni.showLoading({
          title: '加载中',
          mask: true
        })
        getActivityDetail(
          ids
        ).then(res => {
          console.log(res)
          if (res.data.code == 200) {
            this.background = res.data.data.pics = res.data.data.pics.split(",")
            this.background = this.background.map((item) => {
              return item = IMG_URL + item
            })
            console.log(this.background);
            this.dataList = res.data.data
            console.log(this.dataList);
            uni.hideLoading()
          } else {
            uni.showToast({
              title: res.data.data.msg,
              icon: 'none',
              duration: 2000
            })
            uni.hideLoading()
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped src="./index.less">


</style>